import { Radio, Space } from 'antd'
import { TableOutlined, CalendarOutlined } from '@ant-design/icons'
import { useWorkTime } from '../../contexts/WorkTimeContext'
import WorkTimeTable from '../../components/WorkTimeTable'
import WorkTimeCalendar from '../../components/WorkTimeCalendar'
import HolidayInfo from '../../components/HolidayInfo'

const DataViewSection = () => {
  const {
    workTimeData,
    filteredData,
    viewMode,
    setViewMode,
    handleFilterData,
    handleDeleteWorkTime,
    handleEditWorkTime,
  } = useWorkTime()

  return (
    <div className='section-card' style={{ height: '100%' }}>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <h2 className='section-title' style={{ marginBottom: 0 }}>
          数据视图
        </h2>
        <Radio.Group
          value={viewMode}
          onChange={(e) => setViewMode(e.target.value)}
          buttonStyle='solid'
          size='small'
        >
          <Radio.Button value='table'>
            <Space>
              <TableOutlined />
              表格视图
            </Space>
          </Radio.Button>
          <Radio.Button value='calendar'>
            <Space>
              <CalendarOutlined />
              日历视图
            </Space>
          </Radio.Button>
          <Radio.Button value='holiday'>
            <Space>
              <CalendarOutlined />
              节假日管理
            </Space>
          </Radio.Button>
        </Radio.Group>
      </div>

      {workTimeData.length > 0 || viewMode === 'holiday' ? (
        viewMode === 'table' ? (
          <WorkTimeTable
            data={filteredData}
            originalData={workTimeData}
            onFilterData={handleFilterData}
            onDeleteRecord={handleDeleteWorkTime}
            onEditRecord={handleEditWorkTime}
          />
        ) : viewMode === 'holiday' ? (
          <HolidayInfo />
        ) : (
          <WorkTimeCalendar
            data={filteredData}
            originalData={workTimeData}
            onDeleteRecord={handleDeleteWorkTime}
            onEditRecord={handleEditWorkTime}
            onFilterData={handleFilterData}
          />
        )
      ) : (
        <div
          style={{
            textAlign: 'center',
            color: '#999',
            padding: '40px 0',
          }}
        >
          暂无数据，请先导入Excel文件
        </div>
      )}
    </div>
  )
}

export default DataViewSection 